<template>
  <div class="home">
      <div style="display: flex">
          <!--左侧导航栏-->
          <div style="width: 200px">
              <el-aside>
                  <el-menu :default-openeds="openeds" @select="menuClick" text-color="#fff">
                      <el-submenu index="1">
                          <template index="/test01" slot="title"><i class="el-icon-position"></i>电气运维</template>
                          <el-menu-item index="/test01"><i class="el-icon-s-help"></i>电气概况</el-menu-item>
                          <el-menu-item index="/test02"><i class="el-icon-cpu"></i>安全监测</el-menu-item>
                      </el-submenu>
                  </el-menu>
              </el-aside>
          </div >
          <div style="width:calc(100% - 220px);height: 100vh;background:#242E66;">
              <div style="height:500px;" class="scrollbar">
                  <el-scrollbar style="height:100vh;">
                      <div style="width: 98%;padding: 10px">
                              <router-view class="homeRouterView"/>
                      </div>
                  </el-scrollbar>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
    data(){
      return{
          openeds: ['1'],
          uniqueOpened: false,
      }
    },
    methods:{
        menuClick(index){
            this.$router.push(index, () => {})
        },

    }
}
</script>

<style>
    .el-aside{
        width: 200px !important;
        height: 100vh;
    }
    .title{
        font-size: 30px;
        font-family: 华文楷体;
        color: azure;
    }
    .homeRouterView{
        margin-top: 10px;
    }
    .el-menu{
        height: 100%;
        background-color: #182450;
    }
    .el-main{
        background-color: #242E66;
    }
</style>